<template>
  <div class="t-layout__content">
    <el-row :gutter="18">
      <el-col :lg="{ span: '24-l' }" :xl="{ span: '24-l' }">
        <div>
          <el-row :gutter="18">
            <el-col :lg="{ span: '24-15' }" :xl="{ span: '24-14' }">
              <div class="grid-content">
                <div class="grid-content__box" style="height: 326px;">
                  <div class="grid-content__title">常用功能</div>
                  <div class="grid-content__body">
                    <el-row>
                      <el-col v-for="(item, index) in gridList" :key="index" :lg="{ span: '24-4' }" :xl="{ span: '24-4' }" @click="openShortcut(item)">
                        <div class="grid-item">
                          <img :src="item.imageUrl" width="50" />
                          <div class="grid-title">{{ item.name }}</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </el-col>

            <el-dialog :title="title" width="70%" draggable v-model="addDialog">
                <shortcut @cancel="cancel"/>
            </el-dialog>

            <el-col :lg="{ span: '24-9' }" :xl="{ span: '24-10' }">
              
                <el-row :gutter="18">
                  <el-col :span="12">
                    <div class="grid-content">
                    <sky/>
                  </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content">
                      <div class="grid-content__box" style="background: linear-gradient(120deg, rgb(102 155 221), rgb(0 83 189));height: 140px;">
                        <div class="grid-content__title" style="color: #ffffff;">通告通知</div>
                        <div class="grid-content__list">
                          <p>
                            <span class="text_title">中建八局党委活动通知</span>
                            <!-- <span class="text_time">05:09</span> -->
                          </p>
                          <p>
                            <span class="text_title">事务部管理会议</span>
                            <!-- <span class="text_time">05:08</span> -->
                          </p>
                          <p>
                            <span class="text_title">中益集团积极助力北京疫情防控</span>
                            <!-- <span class="text_time">05:08</span> -->
                          </p>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  
                </el-row>
              <div class="grid-content" style="height: 170px;margin-top: 16px;">
                <div class="grid-content__box">
                  <div class="grid-content__title">今日核心指标</div>
                  <div class="grid-content__tip">
                    <el-row>
                      <el-col :span="5">
                        <div class="tip__title">今日 UV</div>
                        <div class="tip__num">67</div>
                        <div class="tip__desc">较昨日 <span class="tip__desc--up">+10%</span></div>
                      </el-col>
                      <el-col :span="5">
                        <div class="tip__title">昨日 UV</div>
                        <div class="tip__num">569</div>
                        <div class="tip__desc">较昨日 <span class="tip__desc--up">+10%</span></div>
                      </el-col>
                      <el-col :span="5">
                        <div class="tip__title">新用户</div>
                        <div class="tip__num">45</div>
                        <div class="tip__desc">较昨日 <span class="tip__desc--up">+10%</span></div>
                      </el-col>
                      <el-col :span="5">
                        <div class="tip__title">近 7 日 UV</div>
                        <div class="tip__num">366</div>
                        <div class="tip__desc">较昨日 <span class="tip__desc--up">+10%</span></div>
                      </el-col>
                      <el-col :span="5">
                        <div class="tip__title">近 30 日 UV</div>
                        <div class="tip__num">5639</div>
                        <div class="tip__desc">较昨日 <span class="tip__desc--up">+10%</span></div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div>
          <xxx />
        </div>
      </el-col>
      <el-col :md="8" :lg="{ span: '24-r' }" :xl="{ span: '24-r' }">
        <div class="grid-content">
          <calendar />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import calendar from '@/views/components/calendar/index.vue'
import image1 from '@/assets/images/1.png'
import image2 from '@/assets/images/2.png'
import image3 from '@/assets/images/3.png'
import image4 from '@/assets/images/4.png'
import image5 from '@/assets/images/5.png'
import image6 from '@/assets/images/6.png'
import xxx from "@/views/components/xxx"
import sky from '@/views/components/sky/index.vue'
import shortcut from '@/views/components/shortcut/index.vue'

const addDialog = ref(false)
const title = ref("快捷方式")
const openShortcut = (item) => {
  console.log(item)
  addDialog.value = true
}

const cancel = () => {
  addDialog.value = false
}

const gridList = reactive([
  {
    imageUrl: image1,
    name: '人员管理'
  },
  {
    imageUrl: image2,
    name: '课程管理'
  },
  {
    imageUrl: image3,
    name: '文章管理'
  },
  {
    imageUrl: image4,
    name: '优惠券'
  },
  {
    imageUrl: image5,
    name: '退款管理'
  },
  {
    imageUrl: image6,
    name: '订单管理'
  }
])



</script>

<style lang="scss" scoped>

@media only screen and (max-width: 1375px) {
    .el-col-lg-24-l {
      max-width: 72%;
    }
    .el-col-lg-24-r {
      max-width: 28%;
    }
    .el-col-lg-24-3 {
      max-width: 33.3%;
    }
    .el-col-lg-24-15 {
      max-width: 30%;
    }
    .el-col-lg-24-9 {
      max-width: 70%;
    }
  }

  @media only screen and (min-width: 1376px) {
    .el-col-xl-24-l {
      max-width: 80%;
    }
    .el-col-xl-24-r {
      max-width: 20%;
    }
    .el-col-xl-24-3 {
      max-width: 33.3%;
    }
    .el-col-xl-24-4 {
      max-width: 25%;
    }
    .el-col-xl-24-14 {
      max-width: 30%;
    }
    .el-col-xl-24-10 {
      max-width: 70%;
    }
  }

.t-layout__content {
  padding: 24px 32px;
  min-width: calc(1375px - 70px);
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;

  .grid-content {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 12px #dbe7fd;

    .grid-content__box {
      padding: 16px 20px;

      .grid-content__title {
        padding-bottom: 12px;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }

      .grid-item {
        text-align: center;
        font-size: 14px;
        padding: 20px 6px;
      }

      .grid-title {
        margin-top: 14px;
        font-size: 14px;
        color: #555;
      }

      .grid-content__tip {
        padding: 0 14px;
      }
    }
  }
}

.grid-content__tip .el-col-5 {
  max-width: 20%;
  flex: 0 0 20%;
}

.tip__num {
  font-size: 28px;
  padding: 6px 0;
  color: #369aff;
  font-weight: 500;
}

.tip__title {
  font-size: 13px;
  color: #666;
  margin-top: 12px;
}

.tip__desc {
  font-size: 13px;
  color: #666;
}

.time-box-wrapper_2uIhb {
  position: relative;
  display: flex;
  flex-direction: column;
}

.time-box_23JAo {
  width: 72px;
  position: relative;
  height: 72px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .1);
  color-scheme: dark;
}

.time-box_23JAo.up-box_6gjvA {
  clip-path: polygon(0 0, 100% 0, 100% 49%, 0 49%);
}

.time-box_23JAo.down-box_7u1gh {
  position: absolute;
  clip-path: polygon(0 51%, 100% 51%, 100% 100%, 0 100%);
}

.symbol_3Fj3z {
  margin: 0 6px;
  position: relative;
  top: -.05rem;
  font-family: PingFangSC-Medium;
}
.grid-content__list p {
    font-size: 14px;
    margin: auto;
    color: #ffffff;
    line-height: 26px;
    display: flex;
}
span.text_title {
    flex: 1;
}
</style>